<template>
  <div class="Capacity">
    <div v-for="(item, index) in list" :key="'item.lineName'+index" class="process-wrap capacity clearfix">
      <span>{{ item.lineName }}出货产能</span>
      <div class="process">
        <div :style="styleList[index]">
          {{ item.capacity }}PNL&nbsp;&nbsp;/&nbsp;&nbsp;{{ item.target }}PNL&nbsp;&nbsp;{{ item.rate }}%
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import { getCapacity } from '@/api/screen'
export default ({
  name: 'Capacity',
  data() {
    return {
      color: ['rgba(89,224,1,1)', 'rgba(158,58,226,1)', 'rgba(222,27,27,1)', 'rgba(46,200,207,1)', 'rgba(108,80,243,1)', 'rgba(4,178,139,1)'],
      color1: ['rgba(89,224,1,0.6)', 'rgba(158,58,226,0.6)', 'rgba(222,27,27,0.6)', 'rgba(46,200,207,0.6)', 'rgba(108,80,243,0.6)', 'rgba(4,178,139,0.6)'],
      styleList: [],
      list: [],
      resData: null,
      currentView: {},
      timer: null,
      refreshInterval: 1000 * 60 * 5
    }
  },
  // computed: {
  //   ...mapGetters([
  //     'regionid',
  //     'lineId'
  //   ])
  // },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  },
  created() {
    this.getCurrentView()
    if (this.$route.path.indexOf('/screen') !== -1) {
      this.dataRefresh()
    }
  },
  methods: {
    getCurrentView() {
      this.currentView = {
        regionid: this.$Cookies.get('currentReginid'),
        lineId: this.$Cookies.get('currentLineId')
      }
      this.getData()
    },
    getData() {
      getCapacity(this.currentView).then(response => {
        this.resData = response.data
        this.rate()
      })
    },
    rate() {
      const total = {
        'lineName': '总',
        'target': 0,
        'capacity': 0
      }

      this.resData.forEach((item, index) => {
        item.target = item.target == null ? 0 : item.target
        item.capacity = item.capacity == null ? 0 : item.capacity
        item['rate'] = item.capacity === 0 ? 0 : item.target === 0 ? 0 : (item.capacity / item.target * 100).toFixed(1)
        this.styleList.push(`width:${item.rate}%;background:linear-gradient(90deg, ${this.color[index]}, ${this.color1[index]}`)
        total.target += item.target
        total.capacity += item.capacity
      })
      total['rate'] = total.capacity === 0 ? 0 : total.target === 0 ? 0 : (total.capacity / total.target * 100).toFixed(1)
      this.styleList.push(`width:${total.rate}%`)
      this.list = [].concat(this.resData)
      this.list.push(total)
    },
    dataRefresh() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        this.getData()
        this.dataRefresh()
      }, this.refreshInterval)
    }
  }
})
</script>

<style lang="scss">
.Capacity{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  overflow-y: auto;

  .process-wrap{
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    padding: 0 10px;
    position: relative;
    display: flex;

    span{
      font-size: 12px;
      width: 110px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }

    .process{
      margin: 7px 0 7px 15px;
      height: 15px;
      background-color: rgba(53,124,240,.5);
      border-radius: 30px;
      box-shadow: 0 0 2px #4e5c98;
      display: inline-block;
      flex: auto;

      div{
        width: auto;
        height: 100%;
        border-radius: 30px;
        max-width: 98%;
        background: linear-gradient(88deg, #3959FF, #2EC8CF);
        text-align: left;
        font-size: 12px;
        line-height: 15px;
        text-shadow: 0 0 3px #000;
        white-space: nowrap;
      }
    }
  }
}
</style>
